<script setup lang="ts">
// 面包屑
import BreadCrumbs from '@/components/BreadCrumbs.vue';
// 商品图片
import GoodsImg from './components/GoodsImg.vue';
// 灰色区域组件
import AddressService from './components/AddressService.vue';
// 商品规格
import GoodsSpecification from './components/GoodsSpecification.vue';
// 按钮
import ButtonComponent from './components/button.vue';
// 轮播图
import GoodsSwiper from './components/GoodsSwiper.vue';
// 底部详情
import GoodsDetail from './components/GoodsDetail.vue';
// 业务渲染
import {useRoute} from 'vue-router'
import instance from '@/utils/request'
import {onMounted,ref} from 'vue'
import type { GoodsDetails } from "@/views/Goods/types/goods"
const route = useRoute()
const {id}  = route.params
const goodsList = ref<GoodsDetails>()
// const goodsList = ref()
onMounted(async ()=> {
  const  res = await instance.request({
    method: 'get',
    url: '/goods',
    params: {
      id: '3995885'
    }
  })
  console.log(res.data.result.mainPictures)
  goodsList.value = res.data.result
})
</script>
<template>
  <div class="container">
    <!-- 传递id -->
    <!-- 面包屑 -->
    <BreadCrumbs
      style="padding: 30px 10px"
      parent-name="三级"
      parent-path="/"
      class="san"
      >>详情</BreadCrumbs
    >
    <div class="goods-to">
      <div class="left">
        <!-- 左侧图片 -->
        <div class="goods-img">
          <GoodsImg :image-list="goodsList?.mainPictures"></GoodsImg>
        </div>
      </div>
      <div class="right">
        <!-- 标题、规格一类 -->
        <div class="right-title">
          <div class="title">{{goodsList?.name}}</div>
          <div class="desc">{{goodsList?.desc}}</div>
          <div class="price">
            <i class="drop-icon">¥</i><span class="drop">{{goodsList?.price}}</span>
            <del class="original"><i class="icon">¥</i>{{goodsList?.oldPrice}}</del>
          </div>
        </div>
        <!-- 地址、配送、服务，灰色区域 -->
        <AddressService></AddressService>
        <!-- 商品规格 -->
        <GoodsSpecification></GoodsSpecification>
        <!-- 按钮 -->
        <ButtonComponent class="btn" color="primary" size="large"
          >加入购物车</ButtonComponent
        >
      </div>
    </div>
    <!-- 轮播图 -->
    <GoodsSwiper>同类产品推荐</GoodsSwiper>
    <!-- 商品详情，评价，热榜 -->
    <GoodsDetail></GoodsDetail>
    <!-- 注意事项 -->
    <div class="goods-warn">
      <h3>注意事项</h3>
      <p class="title">• 购买运费如何收取？</p>
      <p class="conent">默认使用顺丰快递发货（个别商品使用其他快递）</p>
      <p class="conent">配送范围覆盖全国大部分地区（港澳台地区除外）。</p>
      <p class="title">• 如何申请退货?</p>
      <p class="conent">
        1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账；
      </p>
      <p class="conent">2.内裤和食品等特殊商品无质量问题不支持退货；</p>
      <p class="conent">
        3.退货流程：
        确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成；
      </p>
      <p class="conent">
        4.因小兔鲜儿产生的退货，如质量问题，退货邮费由小兔鲜儿承担，退款完成后会以现金券的形式报销。因客户个人原因产生的退货，购买和寄回运费由客户个人承担。
      </p>
    </div>
  </div>
</template>
<style lang="less">
.san {
  font-size: 14px;
  color: #666;
}
.left {
  width: 580px;
  padding: 30px 50px;
  background-color: #fff;
}
.goods-to {
  display: flex;
  .right {
    flex: 1;
    padding: 30px 30px 30px 0;
    background-color: #fff;
    .title {
      font-size: 22px;
      color: #333;
    }
    .desc {
      color: #999;
      margin-top: 10px;
    }
    .drop-icon {
      font-size: 14px;
      color: #cf4444;
    }
    .drop {
      font-size: 22px;
      color: #cf4444;
      margin-right: 10px;
    }
    .icon {
      font-size: 14px;
      color: #999;
    }
  }
  .original {
    color: #999;
    font-size: 16px;
  }
  .price {
    margin-top: 10px;
  }
}
.btn {
  margin-top: 20px;
}
// 注意事项
.goods-warn {
  width: 942px;
  margin-top: 20px;
  background: #fff;
  padding-bottom: 40px;
  h3 {
    height: 80px;
    line-height: 80px;
    border-bottom: 1px solid #f5f5f5;
    padding-left: 50px;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 10px;
  }
  .title {
    color: #333;
    line-height: 40px;
    padding-left: 25px;
  }
  .conent {
    line-height: 40px;
    padding-left: 25px;
    color: #666;
  }
}
</style>
